<script setup>
	// import { deleteMemberAddressByIdAPI, getMemberAddressAPI } from '@/services/address'
	// import { useAddressStore } from '@/stores/modules/address'
	import { onShow } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { storeToRefs } from 'pinia'

	import use地址 from '@/stores/use地址'
	const 地址 = use地址()
	const { 选中地址, 单项组 } = storeToRefs(地址)

	// // 获取收货地址列表数据
	// const 初始化 = async () => {
	// 	const res = await getMemberAddressAPI()
	// 	单项组.value = res.result
	// }
	const onChangeSelected = (e) => {
		console.log('e: ', e);
		选中地址.value = e
	}

	// 初始化调用(页面显示)
	// onShow(() => {
	// 	初始化()
	// })

	// 删除收货地址
	const onDeleteAddress = (id) => {
		// 二次确认
		console.log('id: ', id);
		uni.showModal({
			content: '删除地址?',
			confirmColor: '#27BA9B',
			success: async (res) => {
				if (res.confirm) {
					// 根据id删除收货地址
					// await deleteMemberAddressByIdAPI(id)
					// // 重新获取收货地址列表
					// getMemberAddressData()
				}
			},
		})
	}
	const 删 = (id) => {
		console.log('id: ', id);
		// 二次确认
		uni.showModal({
			content: '删除地址?',
			confirmColor: '#27BA9B',
			success: async (res) => {
				if (res.confirm) {
					// 根据id删除收货地址
					// await deleteMemberAddressByIdAPI(id)
					// // 重新获取收货地址列表
					// 初始化()
				}
			},
		})
	}

	// 修改收货地址
	// const onChangeAddress = (item) => {
	// 	// 修改地址
	// 	地址.change选中地址(item)
	// 	// 返回上一页
	// 	uni.navigateBack()
	// }
</script>

<template>
	<view class="viewport">
		<!-- 地址列表 -->
		<scroll-view enable-back-to-top class="scroll-view" scroll-y>
			<view v-if="单项组.length">
				<!-- 收货地址项 -->
				<uni-card v-for="(item, index) in 单项组" :key="item.id">
					<view class="row justify-between">
						<view class="row flex-center q-gutter-x-xs">
							<!-- 							<text @tap="onChangeSelected(item)" class="a-radio"
								:class="{ checked: item.id==选中地址?.id }"></text> -->
							<a-check @点="onChangeSelected" :item="item"
								:checked="item.id==选中地址?.id"></a-check>
							<view class="column q-gutter-y-sm">
								<view class="q-gutter-x-xs">
									<!-- <uni-data-checkbox v-model="选中序号" :localdata="选中序号"></uni-data-checkbox> -->
									{{ item.收件姓名 }}
									<text class="contact">{{ item.收件电话 }}</text>
									<uni-tag text="默认" type="primary" v-if="item.默认否" />
								</view>
								<view class=""> {{ item.收件省市县 }} </view>
								<view class=""> {{ item.收件详细地址 }} </view>
							</view>
						</view>
						<view class="row flex-center">
							<!-- H5 端需添加 .prevent 阻止链接的默认行为 -->
							<navigator class="edit" hover-class="none"
								:url="`/pagesMember/address-form/address-form?id=${item.id}`" @tap.stop="() => {}"
								@tap.prevent="() => {}">
								<view class="row flex-center text-primary">
									改<uni-icons type="right" size="18" class="text-primary"></uni-icons>
								</view>
							</navigator>
						</view>
					</view>
					<uni-icons type="uniui-clear" size="20" class="text-negative absolute-top-right"
						@tap="地址.删(item.id)">{{'\ue66d'}}</uni-icons>
				</uni-card>
			</view>
			<view v-else class="blank">还没有，收货地址</view>
		</scroll-view>
		<!-- 添加按钮 -->
		<view class="add-btn">
			<navigator hover-class="none" url="/pagesMember/address-form/address-form">
				新建地址
			</navigator>
		</view>
	</view>
</template>

<style lang="scss">
	page {
		height: 100%;
		overflow: hidden;
	}

	.viewport {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f4f4f4;
	}

	.blank {
		margin-top: 300rpx;
		text-align: center;
		font-size: 32rpx;
		color: #888;
	}

	.add-btn {
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 30rpx 20rpx;
		color: #fff;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: #27ba9b;
	}
</style>